import React, {useState, watchEffect} from 'react';

import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Dimensions,
  Alert,
  Button,
} from 'react-native';

import VideoPlayer from 'react-native-video';
// import VideoPlayer from 'react-native-video-controls';
import {AppContext} from './App.js';

import {
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Orientation from 'react-native-orientation-locker';

function getScreen() {
  const {width, height} = Dimensions.get('screen');
  return {width, height};
}

const Home = () => {
  const [player, setPlayer] = useState(null);
  const [info, setInfo] = useState({});
  const [isFull, setIsFull] = useState(false);
  const [paused, setPaused] = useState(true);
  const [screen, setScreen] = useState({
    width: getScreen().height,
    height: getScreen().width,
  });

  function handleLayout(event, _setStatusBar) {
    const layout = event.nativeEvent.layout;
    setInfo(layout);
  }

  function handleFullScreen(statusBar, setStatusBar) {
    setStatusBar(!statusBar);
  }

  function handleReplay(statusBar, setStatusBar) {
    player.seek(0);
    setPaused(false);
  }
  function handlePlay(statusBar, setStatusBar) {
    setPaused(false);
  }
  function handlePause(statusBar, setStatusBar) {
    setPaused(true);
  }

  return (
    <AppContext.Consumer>
      {({statusBar, rotationLock, setStatusBar}) => (
        <View
          style={styles.container}
          onLayout={(event) => handleLayout(event, statusBar, setStatusBar)}>
          <View
            style={{
              ...styles.backgroundVideo,
              ...(statusBar ? screen : {}),
            }}>
            <VideoPlayer
              style={styles.testVideo}
              resizeMode="stretch"
              paused={paused}
              source={{
                uri:
                  'https://short-video-didanuo.oss-cn-shenzhen.aliyuncs.com/san_you.mp4',
              }}
              ref={(ref) => setPlayer(ref)}
            />
            <View style={styles.backVideo}>
              <Button
                onPress={() => handleFullScreen(statusBar, setStatusBar)}
                title="返回"
              />
              <Button
                onPress={() => handlePlay(statusBar, setStatusBar)}
                title="播放"
              />
              <Button
                onPress={() => handleReplay(statusBar, setStatusBar)}
                title="重播"
              />
              <Button
                onPress={() => handlePause(statusBar, setStatusBar)}
                title="暂停"
              />
            </View>
          </View>

          <Button
            onPress={() => handleFullScreen(false, setStatusBar)}
            title="全屏"
          />

          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            {global.HermesInternal == null ? null : (
              <View style={styles.engine}>
                <Text style={styles.footer}>Engine: Hermes</Text>
              </View>
            )}
            <View style={styles.body}>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>哈哈哈哈？</Text>
                {Object.keys(info).map((val) => (
                  <Text key={val}>
                    {val}-{info[val]}
                  </Text>
                ))}
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Step One</Text>
                <Text style={styles.sectionDescription}>
                  Edit <Text style={styles.highlight}>App.js</Text> to change
                  this screen and then come back to see your edits.
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>See Your Changes</Text>
                <Text style={styles.sectionDescription}>
                  <ReloadInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Debug</Text>
                <Text style={styles.sectionDescription}>
                  <DebugInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Learn More</Text>
                <Text style={styles.sectionDescription}>
                  Read the docs to discover what to do next:
                </Text>
              </View>
            </View>
          </ScrollView>
        </View>
      )}
    </AppContext.Consumer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  testVideo: {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
  },
  backgroundVideo: {
    position: 'relative',
    height: 200,
    backgroundColor: Colors.black,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10,
  },
  backVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    fontSize: 20,
    color: 'red',
    lineHeight: 30,
  },
  scrollView: {
    flex: 1,
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    paddingBottom: 200,
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
});

export default Home;
